import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './AnalyzingPage.css';

const AnalyzingPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 添加状态用于控制动画
  const [showContent, setShowContent] = useState(false);
  const [loadingProgress, setLoadingProgress] = useState(0);
  const [loadingText, setLoadingText] = useState('正在初始化分析...');
  
  // 控制内容显示的动画效果
  useEffect(() => {
    // 内容淡入效果
    setTimeout(() => {
      setShowContent(true);
    }, 300);
  }, []);

  // 模拟进度条和加载状态更新
  useEffect(() => {
    const progressInterval = setInterval(() => {
      setLoadingProgress(prev => {
        const newProgress = prev + Math.random() * 15;
        if (newProgress >= 100) {
          clearInterval(progressInterval);
          return 100;
        }
        return newProgress;
      });
    }, 400);

    // 更新加载文本
    const textUpdateTimes = [
      { time: 800, text: '正在收集数据...' },
      { time: 1600, text: '应用 AI/ML 算法...' },
      { time: 2400, text: '生成分析结果...' }
    ];

    textUpdateTimes.forEach(({ time, text }) => {
      setTimeout(() => {
        setLoadingText(text);
      }, time);
    });

    return () => clearInterval(progressInterval);
  }, []);
  
  // 模拟AI分析API调用
  useEffect(() => {
    const symptoms = location.state?.symptoms || [];
    console.log('正在分析症状:', symptoms);
    
    // 模拟API调用延迟
    const timer = setTimeout(() => {
      // 模拟分析结果
      const analysisResult = {
        painLevel: 7,
        affectedAreas: ['头部', '背部'],
        description: "您的症状表明可能存在中度疼痛，这可能与压力和姿势有关。",
        recommendations: [
          "建议进行心理咨询",
          "保持规律的生活习惯",
          "尝试冥想减轻压力"
        ],
        suggestedTreatments: ["认知行为疗法", "放松训练"],
      };
      
      // 分析完成后导航到结果页面
      navigate('/results', { state: { analysisResult } });
    }, 3000); // 3秒后显示结果
    
    return () => clearTimeout(timer);
  }, [location, navigate]);
  
  // 显示分析中页面
  return (
    <div className="analyzing-container">
      {/* 添加动画背景元素 */}
      <div className="circle circle-1"></div>
      <div className="circle circle-2"></div>
      <div className="circle circle-3"></div>
      
      <div className={`analyzing-content ${showContent ? 'fade-in' : ''}`}>
        <h1 className="analyzing-title">分析数据</h1>
        <p className="analyzing-description">
          请稍候，我们正在使用 AI/ML<br />
          心理学硕士分析您的输入。
        </p>

        {/* 添加进度条 */}
        <div className="progress-container">
          <div 
            className="progress-bar" 
            style={{ width: `${loadingProgress}%` }}
          ></div>
        </div>

        {/* 加载状态文本 */}
        <div className="loading-text">{loadingText}</div>

        {/* 添加旋转加载图标 */}
        <div className="loading-spinner">
          <div className="spinner"></div>
        </div>
      </div>
    </div>
  );
};

export default AnalyzingPage; 